<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询小工具</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .weather-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .weather-icon {
            font-size: 4rem;
            margin: 1rem 0;
        }
        .temperature {
            font-size: 3rem;
            font-weight: bold;
            color: #667eea;
        }
        .weather-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .info-item {
            background: rgba(102, 126, 234, 0.1);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
        }
        .search-section {
            margin-bottom: 2rem;
        }
        .loading {
            display: none;
            text-align: center;
            margin: 2rem 0;
        }
        .error-message {
            display: none;
            color: #ef4444;
            text-align: center;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto">
            <h1 class="text-4xl font-bold text-white text-center mb-8">
                <i class="fas fa-cloud-sun mr-2"></i>
                天气查询
            </h1>
            
            <div class="weather-card p-6">
                <div class="search-section">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text text-lg font-semibold">输入城市名称</span>
                        </label>
                        <div class="input-group">
                            <input type="text" 
                                   id="cityInput" 
                                   placeholder="例如：北京、上海、广州" 
                                   class="input input-bordered w-full"
                                   onkeypress="if(event.key === 'Enter') searchWeather()">
                            <button class="btn btn-primary" onclick="searchWeather()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="loading">
                    <span class="loading loading-spinner loading-lg text-primary"></span>
                    <p class="mt-2 text-gray-600">正在获取天气信息...</p>
                </div>

                <div class="error-message" id="errorMessage"></div>

                <div id="weatherResult" style="display: none;">
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-gray-800" id="cityName"></h2>
                        <div class="weather-icon" id="weatherIcon"></div>
                        <div class="temperature" id="temperature"></div>
                        <p class="text-lg text-gray-600 mt-2" id="weatherDesc"></p>
                    </div>
                    
                    <div class="weather-info">
                        <div class="info-item">
                            <i class="fas fa-tint text-blue-500 text-xl mb-2"></i>
                            <div class="font-semibold">湿度</div>
                            <div id="humidity" class="text-lg"></div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-wind text-gray-500 text-xl mb-2"></i>
                            <div class="font-semibold">风速</div>
                            <div id="windSpeed" class="text-lg"></div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-eye text-green-500 text-xl mb-2"></i>
                            <div class="font-semibold">能见度</div>
                            <div id="visibility" class="text-lg"></div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-thermometer-half text-red-500 text-xl mb-2"></i>
                            <div class="font-semibold">体感温度</div>
                            <div id="feelsLike" class="text-lg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script>
        const API_KEY = 'YOUR_API_KEY_HERE'; // 需要替换为实际的API密钥
        const API_URL = 'http://localhost:3000/api/weather';

        async function searchWeather() {
            const cityInput = document.getElementById('cityInput');
            const city = cityInput.value.trim();
            
            if (!city) {
                showError('请输入城市名称');
                return;
            }

            showLoading();
            hideError();
            hideWeatherResult();

            try {
                const response = await axios.get(`${API_URL}?city=${encodeURIComponent(city)}`);
                displayWeatherData(response.data);
            } catch (error) {
                console.error('获取天气信息失败:', error);
                if (error.response && error.response.status === 404) {
                    showError('未找到该城市的天气信息，请检查城市名称是否正确');
                } else {
                    showError('获取天气信息失败，请稍后重试');
                }
            } finally {
                hideLoading();
            }
        }

        function displayWeatherData(data) {
            document.getElementById('cityName').textContent = data.name;
            document.getElementById('temperature').textContent = `${Math.round(data.main.temp)}°C`;
            document.getElementById('weatherDesc').textContent = data.weather[0].description;
            document.getElementById('humidity').textContent = `${data.main.humidity}%`;
            document.getElementById('windSpeed').textContent = `${data.wind.speed} m/s`;
            document.getElementById('visibility').textContent = data.visibility ? `${data.visibility / 1000} km` : 'N/A';
            document.getElementById('feelsLike').textContent = `${Math.round(data.main.feels_like)}°C`;

            const weatherIcon = document.getElementById('weatherIcon');
            const iconCode = data.weather[0].icon;
            weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${iconCode}@4x.png" alt="天气图标">`;

            showWeatherResult();
        }

        function showLoading() {
            document.querySelector('.loading').style.display = 'block';
        }

        function hideLoading() {
            document.querySelector('.loading').style.display = 'none';
        }

        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }

        function hideError() {
            document.getElementById('errorMessage').style.display = 'none';
        }

        function showWeatherResult() {
            document.getElementById('weatherResult').style.display = 'block';
        }

        function hideWeatherResult() {
            document.getElementById('weatherResult').style.display = 'none';
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里添加默认城市或其他初始化逻辑
        });
    </script>
</body>
</html>